<script>
import mySetting from '@/mixins/mySetting'
import { getInitList, getSecondaryList, doDelete } from '@/api/treeDefintion/dataMaintenance'
export default {
  name: 'DataMaintenance',
  components: {
    dataMaintenanceForm: () => import(/* webpackChunkName: "dataMaintenanceForm" */ './component/DataMaintenanceForm.vue')
  },
  mixins: [mySetting],
  data() {
    return {
      infoForm: {},
      tableLoading: false
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const res = await getInitList(this.$clearNull({ ...this.listQuery, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    },
    async tableLoad(tree, treeNode, resolve) {
      const res = await getSecondaryList(this.$clearNull(
        { treeId: tree['treeId'],
          levelId: tree['levelId'],
          queryKey: tree['queryKey'],
          dataId: tree['id']
        }
      ))
      Array.isArray(res.data) ? resolve(res.data) : resolve([])
    },
    handleCreate(row) {
      this.$refs.dataMaintenanceForm.handleOpen(row)
    },
    handleDelete(row) {
      this.$confirm(
        this.$t('confirmDelete'),
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        doDelete({ ids: [row.id] }).then(res => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    }
  },
  render(h) {
    const searchTags = [
      { label: this.$t('keyword'), prop: 'key', tag: 'DynInput' }
    ]
    const tableColumns = [
      { prop: 'name', label: this.$t('elementName') },
      { prop: '', label: this.$t('action'), templete: (_scope) => {
        return (
          <span>
            {_scope.row.isLast ? '' : <el-button type='text' size='mini' on-click={() => this.handleCreate(_scope.row)}> {this.$t('add')}</el-button>}
            {_scope.row.levelId ? <el-button type='text' size='mini' on-click={() => this.handleDelete(_scope.row)}> {this.$t('delete')} </el-button> : ''}
          </span>
        )
      } },
      { prop: 'remark', label: this.$t('remark') },
      { prop: 'createTime', label: this.$t('createTime') }
    ]
    const isTree = {
      treeProps: { children: 'children', hasChildren: 'hasChlid' },
      rowKey: 'id',
      lazy: true,
      load: this.tableLoad
    }
    return (
      <div class='data-maintenance'>
        <el-row>
          <el-col span={24}>
            <dynForm info-form={this.infoForm} search-tags={searchTags}>
              <el-button
                type='primary'
                icon='el-icon-search'
                on-click={this.doSearch}
              >
                { this.$t('search') }</el-button>
            </dynForm>
          </el-col>
        </el-row>
        <el-card shadow='never'>
          <el-row>
            <dynTable
            // 解决子节点删除不刷新问题
              key={Math.random(0, 1) * 99999}
              ref='dynTable'
              loading={this.tableLoading}
              table-data={this.tableData}
              table-columns={tableColumns}
              is-tree={isTree}
            />
          </el-row>
          <pagination
            total={this.total}
            page={this.listQuery.page} {...{ on: 'update:page' }}
            size={this.listQuery.size} {...{ on: 'update:size' }}
            on-click:pagination={this.getList}
          />
        </el-card>
        <dataMaintenanceForm ref='dataMaintenanceForm' vOn:initList={this.initList} />
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
  // .el-form-item {
  //   margin-bottom: 15px;
  // }
}
</style>

